<template>
  <div class="role">
    <el-button type="primary" @click="add">添加角色</el-button>
    <!-- 表格 -->
    <el-table :data="roleslist" style="width: 100%">
      <!-- 展开行 -->
      <el-table-column type="expand">
        <template slot-scope="props">
          <div class="box">
            <!-- 一级 -->
            <div class="box1" v-for="item in props.row.children" :key="item.id">
              <div class="other1">
               <el-tag @click="tightdel(props.row.id,item.id)" closable class="title">{{ item.authName }}</el-tag>
              </div>
              <!-- 二级 -->
              <div class="other2">
                <div class="box2" v-for="ele in item.children" :key="ele.id">
                  <div class="other3">
                    <el-tag @click="tightdel(props.row.id,ele.id)" type="success" closable class>{{ ele.authName }}</el-tag>
                  </div>
                  <!-- 三级 -->
                  <div class="other4">
                    <div class="box3" v-for="son in ele.children" :key="son.id">
                      <el-tag @click="tightdel(props.row.id,son.id)" type="warning" closable class="title">{{ son.authName }}</el-tag>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="角色名称" prop="roleName"> </el-table-column>
      <el-table-column label="角色描述" prop="roleDesc"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          <el-button size="mini" type="warning" @click="roles(scope.row)">分配权限</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分配权限对话框 -->
    <el-dialog title="分配权限" :visible.sync="dialogVisible" width="30%">
      <!-- 树形控件 -->
      <!-- :default-checked-keys="[5]"默认选中 :default-expanded-keys="[2, 3]"默认展开 -->
      <el-tree :data="rights" ref="tree" show-checkbox node-key="id" :default-expanded-keys="arr" :default-checked-keys="arr" :props="defaultProps"></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="yes">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加对话框 -->
    <el-dialog title="添加角色" :visible.sync="dialogVisibleadd" width="40%">
      <!-- 添加表单 -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="roleName">
         <el-input v-model="ruleForm.roleName"></el-input>
         </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
         <el-input v-model="ruleForm.roleDesc"></el-input>
         </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="nok('ruleForm')">取消</el-button>
            <el-button @click="ok('ruleForm')">确定</el-button>
       </el-form-item>
      </el-form>
     </el-dialog>
     <!-- 编辑对话框 -->
     <el-dialog title="添加角色" :visible.sync="dialogVisibleedit" width="40%">
      <!-- 添加表单 -->
      <el-form :model="ruleFormedit" :rules="rulesedit" ref="ruleFormedit" label-width="100px" class="demo-ruleFormedit">
        <el-form-item label="角色名称" prop="roleName">
         <el-input v-model="ruleFormedit.roleName"></el-input>
         </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
         <el-input v-model="ruleFormedit.roleDesc"></el-input>
         </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="nokedit('ruleFormedit')">取消</el-button>
            <el-button @click="okedit('ruleFormedit')">确定</el-button>
       </el-form-item>
      </el-form>
     </el-dialog>
  </div>
</template>
<script>
import { getRolislist, getrights, getRoles,getAddRolis,getDelRolis,getEditRolis,getDelroles} from "../../utils/api";
export default {
  data() {
    return {
      ruleForm:{ //添加表单
        roleName:"", //角色名称
        roleDesc:"", //角色描述
      },
       ruleFormedit:{ //编辑表单
        roleName:"", //角色名称
        roleDesc:"", //角色描述
      },
       rules: { //添加校验
          roleName: [ 
            { required: true, message: '请输入角色名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
           roleDesc: [
            { required: true, message: '请输入角色描述', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
       },
        rulesedit: { //编辑校验
          roleName: [
            { required: true, message: '请输入角色名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
           roleDesc: [
            { required: true, message: '请输入角色描述', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
       },
      arr: [], //选中和半选中的id  数组集合
      roleslist: [], //角色列表/角色权限
      dialogVisibleedit:false, //编辑对话框显示与隐藏
      dialogVisibleadd: false, //添加对话框显示与隐藏
      dialogVisible: false, //分配权限对话框显示与隐藏
      rights: [], //分配权限内容
      rolesid: "", //角色授权id
      editid:'', //编辑id
      defaultProps: {
        //树形控件内容
        label: "authName",
        children: "children",
      },
    };
  },
  methods: {
    tightdel(roleld,rightID){//删除角色指定权限
    // console.log(roleld,rightID);
      getDelroles(roleld,rightID).then(res=>{
        console.log(res);
        this.rander()
      })
    },
    add() {//添加按钮
      this.dialogVisibleadd = true;
    },
    ok(){ //添加模态框中的确定按钮
      getAddRolis(this.ruleForm).then(res=>{
        console.log(res);
        if(res.data.meta.status==201){
          this.$message({
            type: 'success', // success error warning
            message: res.data.meta.msg,
            duration: 2000,
          })
        }
        this.dialogVisibleadd=false
        this.rander()
      })
    },
    nok(){ //添加模态框中的取消按钮
      this.dialogVisibleadd=false
    },
    handleEdit(row) { //编辑回填
      this.dialogVisibleedit=true
      console.log(157,row);
      this.editid=row.id
       this.ruleFormedit={ 
        roleName:row.roleName,
        roleDesc:row.roleDesc      
        }
    }, 
    okedit(){ //编辑模态框中的确定按钮
      getEditRolis(this.ruleFormedit,this.editid).then(res=>{
        console.log(166,this.ruleFormedit);
        console.log(res);
           if(res.data.meta.status==201){
          this.$message({
            type: 'success', // success error warning
            message: res.data.meta.msg,
            duration: 2000,
          })
        }
        this.dialogVisibleedit=false
        this.rander()
      })
    },
    nokedit(){ //编辑模态框中的取消按钮

    },
    handleDelete(row) {//删除
      getDelRolis(row).then(res=>{
        console.log(res);
        if(res.data.meta.status==200){
          this.$message({
            type: 'success', // success error warning
            message: res.data.meta.msg,
            duration: 2000,
          })
        }
        this.rander()
      })
    }, 
    roles(row) {
      this.rolesid = row.id;
      console.log(row);
      //分配权限按钮
      this.dialogVisible = true;
      getrights("tree").then((res) => {
        this.rights = res.data.data;
        let arr = [];
        //  递归意思就是函数内部调用函数
        function fu(row) {
          if (!row.children) {
            return arr.push(row.id);
          }
          row.children.forEach((item) => {
            return fu(item);
          });
        }
        fu(row);
        console.log(arr);
        this.arr = arr;
      });
    },
    yes() {
      //分配权限对话框中的确定按钮 getHalfCheckedKeys半选中的节点 getCheckedKeys全选中的节点
      let arr1 = this.$refs.tree.getHalfCheckedKeys();
      let arr2 = this.$refs.tree.getCheckedKeys();
      // 把半选中和全选中拼接一下用逗号分割这事字符串拼接的方法，先转化为字符串后用加号拼接
      let arr3 = [...arr1, ...arr2]; //拼接
      this.arr = arr3; //为回填做准备将选中和半选中的内容回填到树形控件上
      console.log(this.arr);
      let arr4 = arr3.join(","); //拼接后转化为字符串返回给后台
      // console.log(this.rolesid);
      // 角色授权
      getRoles({ roleld: this.rolesid, rids: arr4 }).then((res) => {
        console.log(res);
        if (res.data.meta.status == 200) {
          this.$message({
            type: "success", // success error warning
            message: res.data.meta.msg,
            duration: 2000,
          });
        }
      });
      this.rander();
      this.dialogVisible = false;
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    rander() {
      getRolislist().then((res) => {
        //请求角色列表
        // console.log(res);
        this.roleslist = res.data.data;
      });
    },
  },
  created() {
    this.rander();
  },
};
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  overflow: auto;
  padding: 30px;
  flex-direction: column;
  .title {
    margin: 5px;
  }
  .box1 {
    display: flex;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    .other1 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-right: 100px;
    }
    .other2 {
      display: flex;
      flex: 1;
      flex-direction: column;
    }
    .box2 {
      display: flex;
      border-top: 1px solid #ccc;
      padding: 20px 0;
      .other3 {
        margin-right: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .other4 {
        display: flex;
        flex-wrap: wrap;
      }
      &:nth-of-type(1) {
        border: none;
      }
    }
  }
}
::v-deep .el-form-item__content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
